<template>
    <div class="cartcontrol">
        <div class="cart-decrease icon-remove_circle_outline" v-show="food.count>0" @click.stop.prevent="dec($event)"></div>
        <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
        <div class="cart-add icon-add_circle" @click.stop.prevent="addCart($event)"></div>
    </div>
</template>
<script>
import Vue from 'vue'
export default {
    props:{
        food: {
            type: Object
        }
    },
    created(){
        // console.log(this.food)
    },
    methods:{
        addCart(event){
            if(!event._constructed){
                return 
            }
            if(!this.food.count){
                Vue.set(this.food, 'count', 1)
            }else{
                this.food.count++
            }
        },
        dec(event){
            if(!event._constructed){
                return
            }else{
                this.food.count--
            }
        }
    }
}
</script>
<style lang="stylus">
    .cartcontrol
        font-size 0
        color rgb(0, 160, 220)
        .cart-decrease
            display inline-block
            padding 6px
            font-size 24px
            line-height 24px
        .cart-count
            display inline-block
            vertical-align top
            width 12px
            padding-top 6px
            line-height 24px
            text-align center
            font-size 12px
            color rgb(147, 153, 159)
        .cart-add
            display inline-block
            font-size 24px
            line-height 24px
            padding 6px
</style>